<template>
  <div v-if="algoItem.functionDemo" id="function-demo">
    <div class="w main">
      <div class="title">功能演示</div>
      <div class="iframe-box">
        <iframe :src="algoItem.functionDemo" width="1220" height="640"></iframe>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { inject, Ref } from 'vue'

  import { AlgoItem } from '../index.vue'

  const algoItem: Ref<AlgoItem> = inject('algoItem')!
</script>

<style lang="less" scoped>
  @import '@/styles/mixins.less';

  #function-demo {
    .main {
      padding: 60px 0;
      background: url('@/assets/img/algo-service/algo-title-icon.svg') no-repeat;
      background-position: 716px 50px;
      background-size: 68px 64px;

      .title {
        position: relative;
        font-size: 30px;
        text-align: center;
        background: linear-gradient(180deg, rgba(14, 14, 40, 0.95) 0%, rgba(54, 54, 99, 0.95) 100%);
        background-clip: text;
        line-height: 38px;
        -webkit-text-fill-color: transparent;
        .fw500();

        img {
          position: absolute;
          top: -7px;
          left: 50%;
          z-index: 3;
          width: 68px;
          height: 64px;
        }
      }

      .iframe-box {
        display: flex;
        justify-content: center;
        margin-top: 56px;
        width: 100%;

        iframe {
          border: none;
        }
      }
    }
  }
</style>
